<template>
	<u-navbar title="切换当前学生" left-icon-color="white" :placeholder="true" title-style="color:white" bgColor="#359FE3"
		:autoBack="false" @leftClick="back"></u-navbar>
	<view class="content">

		<scroll-view scroll-y="true" class="scroll-Y">
			<view
				:class="[{active:student.defaultFlag==1},'overflow-hidden relative box-border border border-gray-200 border-t-gray-500 rounded-lg text-gray-600 mt-4 mb-4']"
				v-for="(student,i) in studentList" :data-index="i" @click="selectItem">
				<view
					:class="[{block:student.defaultFlag==1,hidden:student.defaultFlag==0},'relative bg-sky-500 text-white w-20 text-center h-8 leading-8']">
					已选中</view>
				<view :class="[{hidden:student.defaultFlag==1,block:student.defaultFlag==0},'h-8']"></view>
				<view class="absolute right-0 top-0 bg-red-500 text-white p-2" @click.stop="unbindStudent(student.id)">解除绑定</view>
				<view class=" pt-0  pb-7  pl-4 pr-4">
					<view class="flex justify-between item-center pt-3 pl-3 pr-3">
						<text class="text-3xl text-sky-600 mb-3">{{student.fullname}}</text>
					</view>
					<view class="flex justify-between item-center pt-3 pl-3 pr-3">
						<text>身份证号</text>
						<text class="text-gray-400">{{student.idnumber}}</text>
					</view>
					<view class="flex justify-between item-center pt-3 pl-3 pr-3">
						<text>出生日期</text>
						<text class="text-gray-400">{{student.birthday}}</text>
					</view>
					<view class="flex justify-between item-center pt-3 pl-3 pr-3">
						<text>入学年月</text>
						<text class="text-gray-400">{{student.inSchoolTime}}</text>
					</view>
					<view class="flex justify-between item-center pt-3 pl-3 pr-3">
						<text>归属教育局</text>
						<text class="text-gray-400">{{student.regionId}}</text>
					</view>
					<view class="flex justify-between item-center pt-3 pl-3 pr-3">
						<text>在读学校</text>
						<text class="text-gray-400">{{student.school}}</text>
					</view>
					<view class="flex justify-between item-center pt-3 pl-3 pr-3">
						<text>年级班级</text>
						<text class="text-gray-400">{{student.curGrade}} {{student.curClass}}</text>
					</view>
				</view>

			</view>
			<u-empty mode="list" :show="showEmpty" iconColor="#DEDEDE" text="您还没有添加学生" :iconSize="40">
			</u-empty>
		</scroll-view>
		<button type="primary" @click="addStudent">绑定学生</button>
	</view>
</template>

<script>
	import {
		saveDefaultStudent,
		unbindStudent,
		queryStudentList
	} from '@/api/login.js'

	import lodashFull from '@/uni_modules/iRainna-lodash/js_sdk/js/lodash.full.min.js'
	const {
		isNil
	} = lodashFull()

	export default {
		data() {
			return {
				showEmpty: true,
				studentList: []
			}
		},
		onShow() {
			this.queryData()
		},

		methods: {
			back() {
				uni.redirectTo({
					url:"/pages/index/index"
				});
			},
			unbindStudent(stuId){
				let that = this;
				uni.showModal({
					title: '警告',
					confirmText: '确定',
					cancelText: '取消',
					content: '您确定要解除与该学生的绑定吗？',
					success: function(res) {
						if (res.confirm) {
							unbindStudent(stuId).then(res=>{
								if(res.success){
									that.queryData()
									uni.showToast({
										title: res.msg,
										complete: () => {}
									})
								}
							})
						}
					},
					fail(res) {
						console.log(res);
					}
				});
			},
			selectItem(e) {
				const index = e.currentTarget.dataset.index
				const studentList = this.studentList
				studentList.forEach((item, i) => {
					if (i == index) {
						item.defaultFlag = 1
					} else {
						item.defaultFlag = 0
					}
				})
				saveDefaultStudent(studentList[index].id).then(res => {
					if (res.success) {
						uni.navigateBack({
							delta: 1
						});
					}
				})

			},
			addStudent() {
				uni.navigateTo({
					url: '/pages/studentInfo/studentInfo?isNew=false'
				})
			},
			queryData() {
				queryStudentList().then(res => {
					if (res.success) {
						this.studentList = res.studentList
						if (res.studentList != undefined && res.studentList.length > 0) {
							this.showEmpty = false
						}
					}
				})
			}
		}
	}
</script>

<style>
	.nav-title {
		font-size: 40rpx;
		width: 100%;
		text-align: center;
	}

	.active {
		border-color: #359fe3;
	}

	.content {
		padding: 40rpx;
	}
</style>